<template>
  <div>
    <el-upload
      ref="upload"
      action=""
      :auto-upload="false"
      :limit="1"
      accept="image/*"
      :on-change="onChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-row>
      <el-col :span="6">
        <el-button @click="up">上</el-button>
        <el-button type="primary" @click="down">下</el-button>
        <el-button type="success">左</el-button>
        <el-button type="info">右</el-button>
      </el-col>

      <el-col :span="18">
        <div class="previewImg" :style="{left: left+'px',top: top+'px'}">
          <img ref="preview" :src="previewUrl">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'viewImg',
  data() {
    return {
      previewUrl: '',
      left: 0,
      top: 0
    }
  },
  methods: {
    submitUpload() {
    },
    onChange(file) {
      const isLt = file.size / 1024 < 500
      if (!isLt) {
        this.$message.error('上传头像图片大小不能超过 500K!')
        this.$refs.upload.clearFiles()
        return
      }
      // console.log(file)
      const reader = new FileReader() // 调用FileReader
      reader.readAsDataURL(file.raw) // 将文件读取为 DataURL(base64)
      reader.onload = (evt) => { // 读取操作完成时触发。
        this.previewUrl = evt.target.result // 将img标签的src绑定为DataURL
      }
    },
    up() {
      this.left = 20
      this.top = 50
    },
    down() {
      this.top = 0
      this.left = 0
    }
  }
}
</script>

<style>
.previewImg{
  position: relative;
  transition-duration: 1s;
}
</style>
